import { Button, Input, Space, Spin } from "antd";
import { useEffect, useRef, useState } from "react";
import { useInputState } from "@helpers";
import { tonmi } from "tonmi";

export default function LoginPage(props: any) {
  const loaded = useRef(false);
  const [loading, setloading] = useState(false);
  const [textUser, set_textuser] = useInputState("");
  const [textPass, set_textpass, setPass] = useInputState("");
  const on_login = function () {
    console.log(textUser)
    console.log(textPass)
    setPass(tonmi.GetSM3(textPass));
    setloading(true);
  };

  useEffect(() => {
    if (loaded.current) return;
    loaded.current = true;


    setTimeout(function () {
      setloading(false);
    }, 900);
  }, []);
  return (<div>
    {loading ? <><Spin /></> : <>
      <Space direction="vertical" size={16}>
      <Input autoFocus placeholder="没有填写" value={textUser} onChange={set_textuser} prefix={<><span style={{ color: 'rgba(85, 85, 85, 1)' }}>账号</span></>} suffix={<></>} />
      <Input.Password placeholder="没有填写" value={textPass} onChange={set_textpass} prefix={<><span style={{ color: 'rgba(85, 85, 85, 1)' }}>密码</span></>} suffix={<></>} />
      <Button type="primary" block  onClick={on_login}>登录</Button>
      </Space>
    </>}
    
  </div>);
}